<style>
    .back0 {
        background-color: coral;
    }

    .back1 {
        background-color: forestgreen;
    }
</style>
<div q-view="myview">
    <div q-css="color:{c}">Hello</div>
    <input q-attr="id:'view'+{uid}" type="text" q-value-change="say">
    <span q-text="{uid}+':say'+{say}"></span>
    <input type="text" q-prop="disabled:{uid}=='123'" value="q-prop" />
    <div>
        <ul q-each="list">
            <li q-class="back0:{$index} % 2 ==0;back1:{$index} % 2==1">
                <span q-text="{$index}+1"></span>
                <span>name:</span><span q-text="{name}"></span>---
                <span>sex:</span><span q-text="{sex}"></span>
            </li>
        </ul>
    </div>
</div>

<script>
    qc.view("myview", function (vm, ve) {
        vm.list = [
            {"name": "Andy", "sex": "Male"}
            ,
            {"name": "Lily", "sex": "Female"}
            ,
            {"name": "Lucy", "sex": "Female"}
        ];
        vm.uid = "123";
        vm.say = "word";
        vm.c = "red"
    })
</script>